Non-photorealistic 
GUILTY GEAR Xrd 
-REVELATOR- has evolved 
even further by adding 
features unique to 3D. 
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This series has been fascinating 
players with its 2D anime-like 
visuals and it’s even more 
impressive with its latest 
instalment, GUILTY GEAR Xrd 
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-REVELATOR-. This time, let’s 
focus on elements other than the 
ones we've previously covered 
(CGWORLD vol.214) 
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Improving the visuals 
without harming gameplay 


GUILTY GEAR Xrd -REVELATOR- is the 
sequel to GUILTY GEAR Xrd -SIGN-, a 
fighting game that drew a lot of 
attention for its 3DCG recreation of 
2D anime-like visuals. 


Development began in December 2014, 
after the release of the previous 
title, and after the arcade version 
was released in August 2015, the 
console version is coming out next. 
“At Arc System Works we have a 
development plan that extends 
several years into the future, 
releasing brushed-up sequels as new 
titles," said Daisuke Ishiwatari, 
who has served as general director 
throughout the series. 


From the left: 
(logicalbeat), lead programmer 
Kazuya Igarashi, background artist 
Daisuke Ishiwatari, director 
Junya C. Motomura, technical artist 
Eiji Kato, background artist 


Hidehiko Sakamura, art director and lead animator 


Genki Mamada(ArcSystemWorks), lead background artist 


The visual concept of this series is to recreate 2D 
anime images, but to what extent will 3DCG be 
acceptable for the anime look? 


According to Junya Motomura C., technical artist, that 
line between the two was not drawn well in the previous 
title, and there were parts that were deliberately 
suppressed. Specifically, in the previous game, the 
character shading was fixed for all stages, in line 
with traditional fighting games, but "we were able to 
get feedback from the users on the acceptable range of 
3D," said Hidehiko Sakamura, art director and chief 
animator. 


For example, in this work, characters are affected by 
light from the environment to the extent that it does 


TEMSIGN 


The core staff consists of 12 designers and 5 programmers. 
The workflow was already established in the previous game, 
but since the story stage backgrounds in this game are 
almost full 3DCG and there are many of them, they had to 
review them many times. 


“For this game, we created a new extension tool for the story 
mode, which allows you to manipulate parameters in the Unreal 
Engine from an external editor," said Takuro Ieyumi, lead 
programmer. With this tool, we can control events in the 
background with scripts, which has broadened the scope of 
production and increased the production speed. 


Now, let's take a look at the visual breakdown of this work, 
which has been further brushed up from the previous work. 


/01/ 
Character Rendering 


One of the major changes from the previous game is the reflection of rim light, 
point light, and environmental light of each stage on the characters. 


Also, battle damage has been added to the characters. 


Improved visuals with rim 
lighting 


In the previous game, the highlighting and 
shadowing of the characters were the same in both 
close-ups and far away, so there was a disparity 
in the amount of information. This time, rim 
lighting is added to control the amount of 
information for each image. 


+ Base Texture + Mask for the rim light, 
stored in the alpha 
channel of the Base 
Texture. 


+ Rim Light Off + Rim Light Only 


+ Rim Light Only after masking via texture 
map. Removed areas where we don’t want to see 
a rim light, such as the hair. 


; Rim Light ON. The color is emphasized here 
for readability. 


; Final image. Compared to the image without a rim 
light, the style of the character is much better. 


Reflecting other 
lights 


Characters in the game are now 
affected by point lights from 
attacks and environments, and their 
colors change. 


These point lights are not added to 
the environmental lights, but 
rather, are replaced based on 
distance. The closer the point light 
gets to the character, the more the 
ambient light is taken over by the 
point light and the more it affects 
the character. In normal 
circumstances, we would add point 
lights, but that would make them too 
bright and reduce visibility. “It 
was always a challenge to find the 
right balance between appearance and 
gameplay.” (Mr. Motomura). Having a 
system in which the character's 
color changes under the influence of 
the light greatly increases the 
realism of the game. 
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Adding Battle 
Damage 


As an element unique to fighting, 
a system has been added that 
applies damage such as scratches 
to characters in battle. 
Scratches and stains are shown by 
applying decal textures on top of 
the normal state. 


Additionally, torn and ragged 
meshes were created to show 
damage to clothing. The look of 
the shadows is matched to the 
original via normals. They are 
finely added to the face because 
of close-ups, but overall they 
were added in large sizes to 
create a change in silhouette and 
appearance. 


; Different stages of battle damage. From the left: 


No damage, 


1st Level of damage, 


and final stage of damage. 


Decal texture for battle damage. 


1 Torn fabric mesh before editing the normals. + After editing the normals, you can see that 
The shadows don’t match the surface where it’s the shadows match 
been placed, looks strange. : 


/02/ 
Anime Stylizations 


In addition to the “3D Drawing” that we’ve achieved through adding 3D elements to 
the drawn style, this title adds new innovations such as the metallic surfaces of 
mecha, to strengthen the anime feeling. 


Attention to how 
Mecha-style metal looks. 


+ Normal Base Texture 


For the newly introduced mechanical textures, 
multiple methods were used to reproduce an 
anime-like metal texture. The first is adding 
ambient occlusion to the texture. Shadows are 
roughly created using ambient occlusion, and then 
hand-painted based on those shadows to create the 
final texture. 


; Base Texture with painted AO 


+ Model with Base Texture + Model with “shaded” texture. You can see how 
much richer the image is compared to the flat 
textured model. 


+ We also implemented a “Wakame + Model with the Wakame Highlight texture 

Highlight”, which simulates the luster of applied. The texture is designed to look like 

metal in an anime-style.' the seaweed, and is adjusted to produce the 
desired shape of highlights. 
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TN’: Wakame-style shadows (JAX%#) are a popular technique in mecha anime of the 1980s, popularized by 
Wale 


Masahito Yamashita. Sakugabooru entry. 


Special highlights have also been added to 
edges, to enhance the metallic material. 


= Color Only — Added Highlights 


— Everything 
together with the 
painted texture. 


) WN — With Highlights 
Wy and 
Edge Highlights 


Drawing with 3D 


In the Xrd series, the animation 
workflow includes traditional 
drawing, so it was important to 
control the amount of information in 
a single frame, for example, to 
express a specific facial expression 
or shadow shape. Because of this, we 
prepared many unique facial 
expressions and extra parts, and the 
animators them in 3D space as if 
they were drawing. “It's a manual 
method, but by preparing many small 
pieces, we were able to achieve the 
image we wanted" says Sakamura. 


+ Normal 


+ Shadow ON 


+ Adding topology where we want a 
shadow 
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Placed on the character — 


/03/ 
Battle Stages 


In keeping with the theory of new fighting games, the backgrounds have undergone a 
major renovation and refinement. When the camera rolls in and out, a lot of thought 
was put into making the stage look good. 


Creating stages 
for Fighting 
Games 


There are certain rules and formats 
that have been built up over time 
for backgrounds in fighting games. 
Extreme exaggerations using fisheye 
lenses and false perspectives. 


In the background of fighting games, 
there are certain rules and formats 
that have been built up over the 
years. For example, extreme 
exaggeration using fisheye lenses 
and false perspective, information 
density, a sense of “layering” 
through intentional scrolling of 
background, middle, and foreground 
elements, and individual designs for 
the center, right, and left edges of 
the screen. 


The battle stages in this game were 
created in accordance with these 
rules. 


1 Classic Guilty Gear Stages 


ap fi. ‘ 


| 


% VOOMPHIOS*HS Che 245/10) oI F 


— Side view of the “War Room” Stage 


Another Angle. 
The image shows the horizon line — 


+ The actual screen. By lowering the horizon diagonally from the player character to the 
back of the screen, we’ve created a stage with perspective and depth. 


1 “Babylon” stage, as seen from different angles. 


+ The actual screen. The mesh is bent to create an exaggerated look, like a super 
wide-angle lens. 


Supporting 
cutscene cameras 


When the camera is directed 
to move, like during a 
special attack, there are 
inevitably parts in the 
stage that would get in the 
way of the shot. 


In order to avoid this, 
we've introduced a system to 
Cul paris. 


The hiding and showing of 


parts is controlled by UE3 s + Stage’s culling area. Whenever the camera enters this 
Kismet. ' space, specific objects will be hidden. 


, Hiding range and object that will be t A different angle of the cutscene. You can 
hidden. pec aeie objects from the previous image are 
idden. 


+ Not just background objects, but mob + Cutscene camera. The mob character has 
characters can be hidden as well. Here’s a disappeared. 
normal view, with a mob in the center. 


; Different angle of the cutscene. You can see that the mob character is gone. 


/04/ 
Battle Stages 2 


In this title, the mob characters and gimmicks in the stages change as time passes 
and the rounds progress. This is a fun feature that will keep you coming back for 
more. 


Mobs and Stage 
Gimmicks 


The backgrounds are designed to 
change with as time passes and you 
go through the rounds. First, the 
background team designs the 
production plan in 2D, then the 
animation team adds movement to it, 
and then the background team 
actually incorporates it into the 
game. 


This is also controlled by Kismet, 
and is triggered by each sequence 
called "round phase". This includes 
the passage of time, weather 
changes, victory or defeat, and the 
display or non-display of objects. 
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Kismet in Round 


— The production 
plan and screenshot 
at the start of 
round. Waiting for 
the helicopter to 
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— Round 2 plan and 
screenshot. Throw 
the ingredients in 
the pot and 
cooking. 


Plan for round 3 
and screenshot. 
The characters 
are watching the 
battle while 
eating! = 
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Supporting 
cutscene cameras 


When the camera is directed 
to move, like during a 
special attack, there are 
inevitably parts in the 
stage that would get in the 
way of the shot. 


In order to avoid this, 
we've introduced a system to 
Cul paris. 


The hiding and showing of 


Pakts. tS conurolledipy UE. Ss ; Stage’s culling area. Whenever the camera enters this 
Kismet." space, specific objects will be hidden. 


Placing point 
lights and scene 
colors 


As mentioned before, if there are 
light sources in the stage, the 
character is affected by those point 
lights. 


Not only does the color change, but 
the contrast is also controlled, and 
the darker look while in shadows is 
also due to point lights. 


Furthermore, each stage is designed 
with a separate color for each 
character. In keeping with the 
competitive nature of fighting 
games, and to ensure visibility, a 
full-time staff member is assigned 
to manage this very carefully. 


+ Sol under different lighting conditions 
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+ The sphere in the foreground is the scene color. The light source in the back is the 
point light. These are placed as actors within the UE3 scene. 


+ Normal lighting. 
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+ Affected by the pointlight. When the 
fireworks go off, the shadows of the 
characters become darker, and their cast 


shadow is stretched. 


+ Normal lighting. t Affected by the pointlight. You can see the 
effect of the lighting fixtures. 


/05/ 
Story Mode Stages 


Since the story backgrounds, which used to be mainly 2D, are almost entirely 3D 
this time around, we created a workflow to reduce man-hours, and by making full use 
of UE3's functions, we were able to create something rich, very quickly. 


Reusing assets 


Since the backgrounds in story mode 
are now 3D-centric, the assets 
created for the battle stage were 
processed and used. 


The angle of view and perspective 


were changed to make it look better, 


and UE3's umap was used to create a 
map that makes extensive use of 
asset placement. 
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The story stage. 


The hut and 
mountains in the 
distance were 
placed in exact 
proportions of the 
models in the 


battle stage. = 


S — The battle stage. 


| This background was 
created with a 360° 
: — 3 = view in mind, for 
nl use as a location in 
x un _— =r the Story mode 
el i aK ne stage. 
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Efficient room 
creation 


Creating all of the locations in 
the story mode would have taken 
too many man-hours, so we 
established a simple room-type 
location creation flow for this 
game. For a basic rectangular 
room, the model is UV mapped into 
six pieces, designed, and a 
background draft is created. 


The reference was then given to 
an outside animation background 
art studio, who were in charge of 
painting the walls, floor, and 
ceiling as seen from directly in 
front. The texture is then pasted 
onto the model, adding a sense of 
atmosphere. If there are any 
unnatural parts, we correct them 
and complete the process. 


— Texture Examples 
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Pseudo angle of 
view scaling 


In some cases, the fov value of 
the camera doesn’t provide 
enough information about the 
background or doesn’t produce 
the intended image. 


In order to create the desired 
compositions, bones are added 
to the the rectangular model, 
and the “angle of view” is 
adjusted by shrinking or 
stretching the background for 
each cut. With this, we could 
create a frame with different 
angles of view for the 
characters and the background. 


Example of scaling 
the foreground. — 


— Standard background. 


— Example of scaling the 
background. 
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+ Screenshot. The camera’s angle of view is narrowed to match the characters, 
while the background is distorted to look more wide-angle. 


Story editor 


The previous version of the game 
used a script-based editing system 
to create story mode cuts, which 
took a lot of time and effort. 


In this title, a dedicated editor 
has been developed, leading to a 
significant reduction in workload. 


+ The UI Story Editor has several 
functions and can be used for almost 
anything. Can also be controlled 
with a game controller. 
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Look-correction 
function. 


Separate color 
information can be 


rovided for shaded and 
it areas, allowing you 


to choose colors that 
match the scene. = 


— Bones adjustment function. 


By importing a close-enough pose 
from the pose library, the bones 
can be accessed and processed 
from within the editor. 
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-Attachment function. 


Objects can be placed 
on the character as if 
they were cel 
drawings, ignoring 3D 
space and allowing a 
more 2D-like effect. 


Other GGXrd 3D Materials 
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Follow me on twitter. 


Leo Bruno "GKK" 


@LeoBgkk 


@ Leonardo Bruno. Garuda. Kanta. DM for COMISSION Info. 
Illustration // imiVideo // |. ButtonMashing. 


If you appreciate this translation and wish to donate 


or something, here’s my paypal. 
Other presentations will be linked here, as I finish 


translating them. 


